<template>
  <div>
    御剑乘风来,除魔天地间!

    <hr />

    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.img" style="width: 100px" alt="" />
        {{ item.title }}
      </li>
    </ul>
    <!-- 遮罩层 -->
    <div v-loading class="active"></div>

    <hr />

    <!-- <img
      src="https1://img1.baidu.com/it/u=1520468710,2158648172&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685034000&t=b69c55bcc43cbc5d0f6b2cd6002f6f17"
      alt=""
      v-errorImg="'https://img2.baidu.com/it/u=843527491,2129564370&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685034000&t=648f2924dfe687d61137913c9bacc241'"
    /> -->
    <img
      src="https://img1.baidu.com/it/u=1520468710,2158648172&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685034000&t=b69c55bcc43cbc5d0f6b2cd6002f6f17"
      alt=""
      v-errorImg="imgCom"
    />
  </div>
</template>
<script>
import axios from 'axios'
//换成本地图片 1.要先导入到组件内 在使用
import imgCom from './imgs/xin.webp'

export default {
  name: 'app',
  data () {
    return {
      list: [],
      imgCom
    }
  },
  directives: {
    loading: {
      inserted (el) {
        el.innerHTML = '稍等,很快就加载出来了'
        el.classList.add('active')
      },
      update (el) {
        setTimeout(() => {
          el.style.display = 'none'
        }, 2000)
      }
    },
    errorImg: {
      inserted (el,binding) {
        el.onerror = function(){
          el.src = binding.value
        }
      }
    }
  },
  created () {
    this.getNews()
  },
  computed: {
  },
  methods: {
    async getNews () {
      const res = await axios.get('http://hmajax.itheima.net/api/news')
      console.log(res.data.data)

      this.list = res.data.data
    }
  }
}
</script>
<style lang='less'  scoped>
.active {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  font-size: 50px;
  text-align: center;
  line-height: 100vh;
  color: skyblue;
}
</style>
